<template>
  <div class="dashboard-container">
    <el-carousel :interval="4000" type="card" height="200px" :autoplay="true">
      <el-carousel-item v-for="item in images" :key="item.id">
        <img :src="item.src" alt="carousel-image" style="width: 100%; height: auto;">
      </el-carousel-item>
    </el-carousel>

    <hr>
    <el-card class="dashboard-card" shadow="always">
      <div class="user-info">
        <el-avatar :src="avatar" class="user-avatar" size="large"></el-avatar>
        <h2 class="user-name">{{ name }}</h2>
        <p class="user-id">用户ID: {{ localUserId }}</p>
        <p class="user-id">电子邮箱: {{ email }}</p>
      </div>
    </el-card>

    <div v-if="localUserId === 1">
      <h1 style="text-align: center;">数据管理</h1>
      <el-button type="primary" plain @click="dataBackUp">数据备份</el-button>
      <el-button type="primary" plain @click="databaseRecover">数据恢复</el-button>

      <!-- 数据恢复的dialog -->
      <el-dialog title="数据恢复" :visible.sync="dialogFormVisible">
        <el-form :model="database" :rules="rules" ref="form">
          <el-form-item label="选择需要恢复的数据" prop="name">
            <el-select v-model="database.name" placeholder="请选择要恢复的数据库">
              <el-option v-for="db in databaseList" :key="db.id" :label="db.name" :value="db.name" size="medium"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="databaseRecoverBtn">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- ECharts 图表 -->
    <div ref="echart" class="chart-container"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios';
import * as echarts from 'echarts';

Vue.use(ElementUI)

export default {
  name: 'Dashboard',

  computed: {
    ...mapGetters([
      'name',
      'userId',
      'avatar',
      'email'
    ])
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请选择数据库', trigger: 'change' }
        ]
      },
      databaseList: [],
      dialogFormVisible: false,
      localUserId: '',
      database: {
        id: undefined,
        name: ""
      },
      images: [
        { id: 1, src: '/img/1.jpg' },
        { id: 2, src: '/img/2.jpg' },
        { id: 3, src: '/img/3.jpg' },
        { id: 4, src: '/img/5.jpg' },
        { id: 5, src: '/img/6.jpg' },
        { id: 6, src: '/img/7.jpg' },
        // 添加更多图片对象...
      ]
    }
  },
  created() {
    // 在组件创建时，将 userId 的值赋给 data 中的 localUserId
    this.localUserId = this.userId
    this.initChart()
  },
  methods: {
    /**
     * 数据备份
     */
    dataBackUp() {
      axios.get("http://localhost:8082/database/backup", {})
        .then(resp => {
          console.log("数据备份", resp)
          if (resp.data.code === 0) {
            this.$message.success("数据已成功备份")
          } else {
            this.$message.error("数据备份失败")
          }
        })
    },
    /**
     * 数据恢复按钮
     */
    databaseRecover() {
      this.dialogFormVisible = true
      axios.get("http://localhost:8082/database/getAllDbScript", {})
        .then(resp => {
          console.log("数据恢复", resp)
          if (resp.data.code === 0) {
            this.databaseList = resp.data.data
            console.log("databaseList", this.databaseList)
          } else {
            this.$message.error(resp.data.message)
          }
        })
    },
    /**
     * Form表单确定恢复按钮
     */
    databaseRecoverBtn() {
      console.log("aaaaa", this.database.name)
      axios.get("http://localhost:8082/database/getNewDb", {
        params: {
          scriptName: this.database.name
        }
      }).then(resp => {
        console.log("pppppppp", resp)
        if (resp.data.code === 0) {
          this.$message.success("恢复成功")
          this.dialogFormVisible = false
        } else {
          this.$message.error("数据库恢复失败")
        }
      }).catch(error => {
        console.error("请求失败:", error);
      });
    },
    /**
     * 初始化图表
     */
    initChart() {
      const chartDom = this.$refs.echart;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: 'ECharts 示例图表'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      };
      myChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 30px;
}

.dashboard-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-avatar {
  margin-bottom: 20px;
}

.user-name {
  font-size: 24px;
  margin-bottom: 10px;
}

.user-id {
  font-size: 16px;
}

.chart-container {
  width: 100%;
  height: 400px;
}
</style>